<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF--8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js"></script>
  </head>
  <body>
    <div class="container">
      <header class="header">
        <div class="nav">
          <div>首页</div>
          <div>更多</div>
          <div>关于</div>
        </div>
      </header>

      <main class="body-content">
        <div class="video-scroll-container">
          <canvas></canvas>
        </div>
        <div class="info">
          <p>这里是视频播放结束后的内容,避免直接处理导致衔接问题</p>
          <img src="../../public/img/2.jpg" alt="" />
        </div>
      </main>

      <footer class="footer">
        <p>这是页脚区域。</p>
      </footer>
    </div>

    <video src="../../public/video/1.mp4" muted playsinline></video>
  </body>
</html>
